import React,{Component} from 'react';
import {connect} from 'react-redux';
import {setToken,setOpenKeys,setSelectedKey} from "../../actions";
import PropTypes from 'prop-types';
import {Layout, Menu, Icon, Popover, Modal} from "antd";
import './Index.css';
import {menuList,routeList} from "../../config/menuList";
import {Switch,Route} from 'react-router-dom';
import NotFound from "../NotFound/NotFound";

const {Header,Sider,Content} =Layout;
const {confirm}=Modal;
const { SubMenu } = Menu;

class Index extends Component{
    constructor(props){
        super(props);
        this.state={
            token:'',
            collapsed: false,
            popoverVisible:false,
            selectedKeys:'/',
            openKeys:['sub1']
        };
    }

    render(){
        const content = (
            <div>
                <p className={'responsiveUsername'}>欢迎你，bestob</p>
                <p className={'responsiveLogout'} onClick={()=>this.handlePopExit()}>
                    <Icon type="logout" className={'responsiveLogoutLogo'} />
                    <label>退出</label>
                </p>
            </div>
        );
        const {popoverVisible}=this.state;
        const {selectedKey,openKeys}=this.props;
        return(
            <Layout>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{overflowY:'auto'}}>
                    <div className="logo">小程序电商系统</div>
                    <Menu
                        theme="dark"
                        mode="inline"
                        selectedKeys={[selectedKey]}
                        openKeys={openKeys}
                        onOpenChange={(openKeys)=>this.handleOpenKeys(openKeys)}
                        onClick={(e)=>this.handleOnSelect(e)}
                    >
                        {
                            this.handleGetMenuList(menuList)
                        }
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{ background: '#fff', padding: 0 }}>
                        <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                        <div className={'headerRight'}>
                            <div className={'username'}>欢迎你，bestob</div>
                            <div className={'logout'} title={'退出'} onClick={()=>this.handleExit()}>
                                <Icon type="logout" className={'logoutLogo'} />
                                <label>退出</label>
                            </div>
                        </div>
                        <div className={'responsiveHeaderRight'}>
                            <Popover placement="bottomRight" title={''} content={content} trigger="click" visible={popoverVisible}>
                                <div><Icon type="unordered-list" className={'logoutMenu'} onClick={()=>this.handleShowPop()}/></div>
                            </Popover>
                        </div>
                    </Header>
                    <Content
                        style={{
                            margin: '24px 16px',
                            minHeight: 280,
                            overflow:"auto"
                        }}
                    >
                        <Switch>
                            {
                                routeList.map((item,index)=>{
                                    return(
                                        <Route key={index} exact path={item.path} component={item.component}/>
                                    )
                                })
                            }
                            <Route component={NotFound}/>
                        </Switch>
                    </Content>
                </Layout>
            </Layout>
        )
    }

    componentDidMount() {

    }

    componentWillUnmount() {
    }

    /**
     * 处理submenu打开关闭事件
     * @param openKeys
     */
    handleOpenKeys(openKeys){
        this.props.setOpenKeys(openKeys);
    }

    /**
     * 处理menuitem选择事件
     * @param e
     */
    handleOnSelect(e){
        this.props.setSelectedKey(e.key);
        this.props.history.push({pathname:e.key,state:{id:1}});
    }

    /**
     * 处理退出事件
     */
    handleExit(){
        const _this=this;
        confirm({
            title: '您确认退出吗?',
            content: '',
            onOk() {
                console.log('OK');
                _this.props.history.push('/login');
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    /**
     * 处理退出事件
     */
    handlePopExit(){
        this.handleShowPop();
        const _this=this;
        confirm({
            title: '您确认退出吗?',
            content: '',
            onOk() {
                console.log('OK');
                _this.props.history.push('/login');
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }

    /**
     * 隐藏显示popover弹框
     */
    handleShowPop(){
        this.setState({popoverVisible:!this.state.popoverVisible});
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    /**
     * 获取侧边菜单栏组件
     * @param menuList
     * @returns {*}
     */
    handleGetMenuList(menuList){
        return menuList.map((item,index)=>{
            if(item.show){
                if(item.children&&Array.isArray(item.children)){
                    return(
                        <SubMenu title={<span>
                                            <Icon type={item.icon} />
                                            <span>{item.title}</span>
                                    </span>
                                }
                                 key={item.subKey}>
                            {
                                this.handleGetMenuList(item.children)
                            }
                        </SubMenu>
                    )
                }else{
                    return(
                        <Menu.Item key={item.path}>
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </Menu.Item>
                    )
                }
            }
            return null;
        })
    }
}
const mapStateToProps=(state,ownProps)=>{
    return{
        token:state.setToken,
        openKeys:state.setOpenKeys,
        selectedKey:state.setSelectedKey
    }
};
const mapDispatchToProps=(dispatch,ownProps)=>{
    return{
        setToken:token=>{
            dispatch(setToken(token));
        },
        setOpenKeys:openKeys=>{
            dispatch(setOpenKeys(openKeys))
        },
        setSelectedKey:selectedKey=>{
            dispatch(setSelectedKey(selectedKey))
        },
        dispatch
    }
};
Index.propTypes={
    token:PropTypes.string.isRequired,
    setToken:PropTypes.func.isRequired,
    openKeys:PropTypes.array.isRequired,
    setOpenKeys:PropTypes.func.isRequired,
    selectedKey:PropTypes.string.isRequired,
    setSelectedKey:PropTypes.func.isRequired,
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Index);
